<template>
        <el-card shadow="never" style="max-height: 700px; overflow: auto">
            <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
                <el-form-item label="id:" prop="id" v-show="false">
                    <el-input v-model="form.id" disabled />
                </el-form-item>
                <el-form-item label="星期:" prop="week">
                    <el-select v-model="form.week" placeholder="请选择星期" clearable>
                        <el-option v-for="(item, index) in week" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="标志:" prop="flag">
                    <el-select v-model="form.flag" multiple placeholder="请选择标志" clearable>
                        <el-option v-for="(item, index) in flag" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="性别:" prop="genderdata">
                    <el-radio-group v-model="form.genderdata">
                        <el-radio v-for="(item, index) in genderdata" :key="index" :label="item.value">{{ item.label }}</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="活动:" prop="actdata">
                    <el-checkbox-group v-model="form.actdata">
                        <el-checkbox v-for="(item, index) in actdata" :key="index" :label="item.value">{{ item.label }}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="标题:" prop="title">
                    <el-input v-model="form.title" placeholder="请输入标题" clearable />
                </el-form-item>
                <el-form-item label="内容:" prop="content">
                    <el-input v-model="form.content" placeholder="请输入内容" :rows="4" type="textarea" />
                </el-form-item>       
                <el-form-item label="关键字:" prop="keywords">
                    <el-input v-model="form.keywords" placeholder="请输入关键字" clearable />
                </el-form-item>
                <el-form-item label="描述:" prop="description">
                    <el-input v-model="form.description" placeholder="请输入描述" clearable />
                </el-form-item>
                <el-form-item label="图片:" prop="image">
                    <ImageUpload v-model="form.image" />
                </el-form-item>          
                <el-form-item label="图片组:" prop="images">
                    <ImageUpload v-model="form.images" :limit="10" />
                </el-form-item>
                <el-form-item label="附件:" prop="attachfile">
                    <FileUpload v-model="form.attachfile" />
                </el-form-item>
                <el-form-item label="省市:" prop="city">
                    <el-input v-model="form.city" placeholder="请输入省市" clearable />
                </el-form-item>
                <el-form-item label="价格:" prop="price">
                    <el-input-number v-model="form.price" :step="0.01" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="开始日期:" prop="startdate">
                    <el-date-picker v-model="form.startdate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始日期" />
                </el-form-item>        

                <el-form-item label="权重:" prop="weigh">
                    <el-input-number v-model="form.weigh" :step="1" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="开关:" prop="switch">
                    <el-switch v-model="form.switch" active-color="#13ce66" :active-value="1" :inactive-value="0"> </el-switch>
                </el-form-item>
                <el-form-item label="状态值:" prop="status">
                    <el-select v-model="form.status" placeholder="请选择状态值" clearable>
                        <el-option v-for="(item, index) in status" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="分类:" prop="category_id">
                    <el-input-number v-model="form.category_id" :step="1" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="name:" prop="name">
                    <el-input v-model="form.name" placeholder="请输入name" clearable />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm">确认 </el-button>
                    <el-button type="warning" @click="cancel">取消 </el-button>
                </el-form-item>
            </el-form>
        </el-card>
</template>

<script>
export default {
    name: 'EditForm',
    props: {
        findFormData: {
            type: Object,
            default: {}
        },
        editFormParams: {
            type: Object,
            default: {}
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
        
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {
                week: [{ required: true, message: "请输入星期", trigger: "blur" }],
                flag: [{ required: true, message: "请输入标志", trigger: "blur" }],
                genderdata: [{ required: true, message: "请输入性别", trigger: "blur" }],
                actdata: [{ required: true, message: "请输入活动", trigger: "blur" }],
                content: [{ required: true, message: "请输入内容", trigger: "blur" }],
                price: [{ required: true, message: "请输入价格", trigger: "blur" }],
                weigh: [{ required: true, message: "请输入权重", trigger: "blur" }],
                switch: [{ required: true, message: "请输入开关", trigger: "blur" }],
                status: [{ required: true, message: "请输入状态值", trigger: "blur" }],
        
            },
            form: { actdata: [], },
          
            week:[
               { label: "星期一", value: 1 },
               { label: "星期二", value: 2 },
               { label: "星期三", value: 3 },
            ],
            flag:[
               { label: "热门", value: 1 },
               { label: "最新", value: 2 },
               { label: "推荐", value: 3 },
            ],
            genderdata:[
               { label: "男", value: 1 },
               { label: "女", value: 2 },
               { label: "未知", value: 3 },
            ],
            actdata:[
               { label: "徒步", value: 1 },
               { label: "读书会", value: 2 },
               { label: "自驾游", value: 3 },
            ],
            status:[
               { label: "禁用", value: 0 },
               { label: "正常", value: 1 },
            ],

        }
    },
    watch: {
        findFormData: {
           handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                    })
                }
            },
            immediate: true,
            deep: false,
        },
        
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },

        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.$emit('submitForm', this.form)
                }
            })
        },

        // 表单重置
        reset() {
            this.resetForm('form')
        }
    }
}
</script>
